<template>
  <page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="service-provider-home">
    <!-- 顶部导航栏 -->

    <!-- 服务商信息卡片 - 新布局 -->
    <view class="provider-card">
      <!-- 第一行：头像、名称、编号 -->
      <view class="row1">
        <view class="avatar-container">
          <image :src="provider.avatar" class="avatar" mode="widthFix" alt="服务商头像"></image>
          <!-- <view class="vip-badge">
            <uni-icons type="vip" size="16" color="#FFD700"></uni-icons>
          </view> -->
        </view>

        <view class="name-id-container">
          <view class="name-rating">
            <text class="provider-name  text13">{{ provider.name }}</text>
            <!-- 星级展示区域 -->
            <view class="star-rating">
              <view class="stars">
                <uni-icons type="star" size="16" color="#FFD700" v-for="(star, index) in 5" :key="index"
                  :class="{ filled: index < providerStarLevel }"></uni-icons>
              </view>
              <!-- <text class="star-value">{{ providerStarLevel.toFixed(1) }}星</text> -->
            </view>
          </view>
          <text class="provider-id  text12">{{ provider.code }}</text>
        </view>
      </view>

      <!-- 第二行：统计数据 -->
      <view class="row2 stats">
        <view class="stat-item">
          <text class="stat-value text13">{{ provider.monthlyOrders }}</text>
          <text class="stat-label text12">本月订单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value text13">{{ provider.praiseRate }}</text>
          <text class="stat-label text12">好评分</text>
        </view>
        <view class="stat-item">
          <text class="stat-value text13"> {{ provider.serviceScore }} </text>
          <text class="stat-label text12">服务评分</text>
        </view>
        <view class="stat-item">
          <text class="stat-value text13">{{ provider.starLevel }}</text>
          <text class="stat-label text12">星级</text>
        </view>
      </view>
    </view>

    <gridMenu :gridItems="gridItems" count="3" ptop="40rpx" mbottom="10rpx" gap="16px" />

  </view>
  <!-- <SimpleTabBar/> -->
  <TabComponent :tabs="currentTabs" @change="onTabChange" />

</template>

<script setup>
import { service_provider_infoApi } from "@/api/commerce"

import gridMenu from "@/components/grid-menu/index"
import { onShow } from '@dcloudio/uni-app';


import {
  ref,
  getCurrentInstance,
  onMounted,
  computed,
  nextTick,
  watch
} from 'vue';
import {
  useRouter
} from 'uni-mini-router'

import {
  useFontSizeStore
} from '@/stores/fontSizeStore';
import {
  useTabStore
} from '@/stores/tabs'
import {
  ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'

import { useShare } from '@/utils/useShare';
import { getAppEnum } from "@/utils/appDataEnum"

// 配置分享内容
const { onShareAppMessage, onShareTimeline } = useShare({
  title: '欢迎',
  path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
  imageUrl: '/static/share-cover.jpg',
  query: '' // 朋友圈参数（可选）
});


const fontSizeStore = useFontSizeStore();
const router = useRouter();

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
  const role = getApp()[getAppEnum.CurrentRole];
  return ROLE_TABS[role]?.tabs
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
  nextTick(() => {
    router.pushTab({
      name: tab.key
    })
  })
}
// import SimpleTabBar from '@/components/custom-tab-bar/index.vue'

// 状态管理
const hasNewMessage = ref(true);
// 服务商星级 (1-5星，支持半星)
const providerStarLevel = ref(4.5);

const provider = ref({
  avatar: "",
  name: "",
  code: "",
  monthlyOrders: "",
  praiseRate: "",
  serviceScore: "",
  starLevel: ""
})

onMounted(() => {
 
  service_provider_infoApi({
    id: "",
    role: ""
  }).then((res) => {
    console.log("res:", res);
    if (res.code == 200) {
      provider.value = res.data
    }
  })
})

// 待办事项列表
const todoList = ref([
  {
    type: 'pending',
    content: '有3个待处理订单需要确认',
    time: '今天 09:30'
  },
  {
    type: 'warning',
    content: '2个订单即将超时，请尽快处理',
    time: '今天 14:15'
  }
]);


const gridItems = ref([
  {
    iconClass: 'order-icon',
    iconName: 'icon-xiadan4',
    text: '订单管理',
    pathName: "common_orderList"
  },
  {
    iconClass: 'urgent-icon',
    iconName: 'icon-yijian',
    text: '一键抢单',
    pathName: "common_grabOrder"
  },
  {
    iconClass: 'dispatch-icon',
    iconName: 'icon-paidan1',
    text: '派单管理',
    pathName: "common_dispatchManagement"
  },
  {
    iconClass: 'dispatch-down-order',
    iconName: 'icon-xiadan4',
    text: '现场下单',
    pathName: "common_order_on_site"
  },
  {
    iconClass: 'record-icon',
    iconName: 'icon-shuju4',
    text: ' 手动数据采集',
    pathName: "common_dataCollection"
  },
  {
    iconClass: 'service-icon',
    iconName: 'icon-fuwujilu3',
    text: '服务记录',
    pathName: "common_serviceRecord"
  },
]);

 



</script>

<style scoped lang="less">
@import '@/static/styles/commerce/home/grid_menu_items.less';


// 页面基础样式
.service-provider-home {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #F7F8FA;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 导航栏样式
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #eee;

  .nav-title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }

  .nav-actions {
    display: flex;
    gap: 16px;

    button {
      background: transparent;
      border: none;
      padding: 5px;
      position: relative;
      line-height: normal;
    }

    .badge {
      position: absolute;
      top: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background-color: @color-primary;
      color: #FFFFFF;
      font-size: 10px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 服务商信息卡片 - 新布局
.provider-card {
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 30rpx 0;
  margin-top: 0;
  padding: 30rpx;

  // 第一行：头像、名称、编号
  .row1 {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;

    .avatar-container {
      position: relative;
      flex-shrink: 0; // 防止头像被压缩

      .avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #F2F3F5;
      }

      .vip-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background-color: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
    }

    .name-id-container {
      flex: 1; // 占满剩余空间

      .name-rating {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;

        .provider-name {
          font-size: 17px;
          font-weight: 500;
          color: #333333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        // 星级样式
        .star-rating {
          display: flex;
          align-items: center;
          gap: 4px;

          .stars {
            display: flex;
            gap: 1px;
          }

          // 未填充的星星
          uni-icons:not(.filled) {
            color: #EEEEEE !important;
          }

          .star-value {
            font-size: 13px;
            color: #FF7D00;
            font-weight: 500;
          }
        }
      }

      .provider-id {
        font-size: 13px;
        color: @color-bg-overlay;
      }
    }
  }

  // 第二行：统计数据
  .row2 {
    width: 100%;
    border-top: 1px dashed #eee;
    padding-top: 12px;
  }
}

// 统计数据样式
.stats {
  display: flex;
  justify-content: space-between; // 平均分布
  width: 100%;

  .stat-item {
    text-align: center;
    flex: 1; // 每个统计项平均分配宽度

    .stat-value {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      display: block;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 12px;
      color: @color-bg-overlay;
      white-space: nowrap;
    }
  }
}


// 待办事项区域
.todo-section {
  background-color: #FFFFFF;
  border-radius: 12px;
  // margin: 0 16px 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 30rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }

    .view-all {
      font-size: 14px;
      color: @color-info;
    }
  }

  .todo-list {
    .todo-item {
      display: flex;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .todo-icon {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
      }

      .pending {
        background-color: rgba(24, 144, 255, 0.1);
      }

      .warning {
        background-color: rgba(255, 125, 0, 0.1);
      }

      .todo-content {
        flex: 1;

        .todo-text {
          font-size: 14px;
          color: #333333;
          display: block;
          margin-bottom: 4px;
        }

        .todo-time {
          font-size: 12px;
          color: @color-bg-overlay;
        }
      }
    }
  }
}
</style>